<!--
 * @Description:
 * @Date: 2023-10-25 08:40:55
 * @LastEditTime: 2023-12-25 12:23:07
-->
<template>
	<div class="home" id="home">
		<transition-loading :isShow="loadShow" />
		<div class="chart-list">
			<home-header @click="fullScreen" />
			<div style="padding: 0 8px" class="chart-content">
				<!-- 整体布局 左 中 右 -->
				<a-row class="chart-content-row">
					<!-- 左侧 -->
					<a-col v-bind="leftRightCol" id="chart-content-left" class="chart-content-col">
						<a-row class="chart-content-left" v-if="showPage === 1">
							<a-col class="chart-content-left-item" :span="24">
								<ModuleItem title="支部组织情况" :loading="initLoading">
									<squareGrid :type="0" :topData="topData"></squareGrid>
								</ModuleItem>
							</a-col>
							<a-col class="chart-content-left-item" :span="24">
								<ModuleItem title="党支部信息" class="ModuleItem" :loading="initLoading">
									<div :ref="leftChart.container" class="chart-container" style="flex: 1; width: 100%"></div>
								</ModuleItem>
							</a-col>
							<a-col class="chart-content-left-item" :span="24">
								<ModuleItem title="党支部评分" :loading="initLoading">
									<div class="virtual-list-content">
										<seamlessScroll
											v-if="seamlessList.length > 0"
											:dataSource="seamlessList"
											class="virtual-list"
										></seamlessScroll>
									</div>
								</ModuleItem>
							</a-col>
						</a-row>
						<a-row class="chart-content-left" v-else>
							<a-col class="chart-content-left-item liu-dong" :span="24">
								<ModuleItem title="A党支部" :loading="initLoading">
									<flowGrid></flowGrid>
								</ModuleItem>
							</a-col>
							<a-col class="chart-content-left-item liu-dong" :span="24">
								<ModuleItem title="B党支部" :loading="initLoading">
									<flowGrid></flowGrid>
								</ModuleItem>
							</a-col>
						</a-row>
					</a-col>
					<!-- 中间 -->
					<a-col v-bind="centerCol" class="chart-content-col">
						<a-row class="chart-content-center">
							<cesiumMap :style="{ width: `${100 * scales}%`, height: `${100 * scales}%` }"></cesiumMap>
						</a-row>
					</a-col>
					<!-- 右侧 -->
					<a-col v-bind="leftRightCol" id="chart-content-right" class="chart-content-col">
						<a-row class="chart-content-right" v-if="showPage === 1">
							<a-col class="chart-content-right-item" :span="24">
								<ModuleItem title="党员基本情况" :loading="initLoading">
									<squareGrid :type="1" :topData="topData"></squareGrid>
								</ModuleItem>
							</a-col>
							<a-col class="chart-content-right-item" :span="24">
								<ModuleItem title="新增党员统计" :loading="initLoading">
									<div :ref="rightOneChart.container" class="chart-container"></div>
								</ModuleItem>
							</a-col>
							<a-col class="chart-content-right-item" :span="24">
								<ModuleItem title="党员学历" :loading="initLoading">
									<div :ref="rightTwoChart.container" class="chart-container"></div>
								</ModuleItem>
							</a-col>
						</a-row>
						<a-row class="chart-content-right" v-else>
							<a-col class="chart-content-right-item liu-dong" :span="24">
								<ModuleItem title="A党支部" :loading="initLoading">
									<flowGrid></flowGrid>
								</ModuleItem>
							</a-col>
							<a-col class="chart-content-right-item liu-dong" :span="24">
								<ModuleItem title="B党支部" :loading="initLoading">
									<flowGrid></flowGrid>
								</ModuleItem>
							</a-col>
						</a-row>
					</a-col>
				</a-row>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
//插件的引用
import { nextTick, onBeforeUnmount, onUnmounted, onMounted, reactive, ref } from 'vue';
import { debounce } from 'lodash';
//组件的引用
import squareGrid from '@/pages/home/components/squareGrid/index.vue';
import flowGrid from '@/pages/home/components/flowGrid/index.vue';
import HomeHeader from './components/home-header/index.vue';
import centerMap from '@/components/centerMap/index.vue';
import cesiumMap from '@/pages/map/index.vue';
import seamlessScroll from '@/components/seamlessScroll/index.vue';
//静态资源的引用
import indexImg from '@/assets/images/index-bg.png';
import headerImg from '@/assets/images/home-header.png';
import footImg from '@/assets/images/foot.png';
import { getHomeData } from './service';
//chart图标和data数据useHook
import useOpenRank from './composables/use-open-rank';
import userightTwoChart from './composables/use-review-efficient';
import useChartModal from './composables/use-chart-modal';
import useGithub from './composables/use-github';
import useRadar from './composables/use-radar';
//自适应结构数据
import { leftRightCol, centerCol } from './config';
import autofit from 'autofit.js';
import { useRouter } from 'vue-router';
import { bus } from '../../utils/mitt';
const router = useRouter();
const imgCount = 3;
let curCount = 0;
//eChart图表，数据，页面等待初始化
const chartModalData = useChartModal();
const leftChart = useOpenRank({ showHandler: chartModalData.changeVisible });
const rightTwoChart = userightTwoChart(chartModalData.changeVisible);

const rightOneChart = useRadar();
const showPage = ref(1);
const scales = ref(1);
const loadShow = ref<boolean>(true);
const initLoading = ref<boolean>(false);
const leftHeight = reactive([
	{ label: '党支部', width: '33%' },
	{ label: '级别', width: '33%' },
	{ label: '级别', width: '33%' }
]);
const seamlessList = ref([]);
const topData = reactive({
	zbzz: null,
	dyjb: null
});
onMounted(() => {
	autofit.init(
		{
			dh: 1080,
			dw: 1920,
			el: '#home',
			ignore: ['#cesium-viewer'],
			resize: true
		},
		false
	);
	getScale();
	window.addEventListener('resize', getScale);
	loadImg();
	getHomeData().then(res => {
		getInitData(res);
	});

	bus.on('aaaa', value => {
		console.log(value, '接收数据');
		getInitData(value);
	});
	window.addEventListener('resize', chartResize);
});
/**
 * @description 处理全部图表的缩放
 */
const chartResize = debounce(() => {
	leftChart.chart.resizeChart();
	rightTwoChart.chart.resizeChart();
	rightOneChart.chart.resizeChart();
}, 500);

/**
 * @description: 页面等待加载方法
 * @return {*}
 */
const loadImg = () => {
	const imgArr = [indexImg, headerImg, footImg];
	imgArr.forEach(item => {
		const newImage = new Image();
		newImage.src = item;
		newImage.onload = () => {
			addImgCount();
		};
	});
};
const addImgCount = () => {
	curCount++;
	if (curCount === imgCount) {
		loadShow.value = false;
	}
};

/**
 * @description: 页面数据加载
 * @return {*}
 */
const getInitData = (res: any) => {
	initLoading.value = true;

	res['dzbpf'].forEach(item => {
		item.sort_id = item.id;
	});
	topData.zbzz = res['zbzz'];
	topData.dyjb = res['dyjb'];
	seamlessList.value = res['dzbpf'];
	nextTick(() => {
		rightTwoChart.chart.initChart(res['dyxl']);
		rightOneChart.chart.initChart(res['xzdy']);
		leftChart.chart.initChart(res['zbxx'], 'openrank');
	});
	initLoading.value = false;
};

onBeforeUnmount(() => {
	//window.handler.removeAll();
	//window.removeEventListener('resize', chartResize);
	window.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	//console.log(window.handler);
});

function fullScreen() {
	router.push({
		path: '/partyBuilding',
		query: {
			id: 1,
			name: '21212'
		}
	});
	// 是否全屏，否为null
	// let full = document.fullscreenElement;
	// console.log(full);
	// if (!full) {
	// 	// document自带的全屏方法
	// 	document.documentElement.requestFullscreen();
	// } else {
	// 	// document自带的推出全屏方法
	// 	document.exitFullscreen();
	// }
}
function getScale() {
	let el = document.getElementById('home');
	let st = window.getComputedStyle(el, null);
	let tr =
		st.getPropertyValue('-webkit-transform') ||
		st.getPropertyValue('-moz-transform') ||
		st.getPropertyValue('-ms-transform') ||
		st.getPropertyValue('-o-transform') ||
		st.getPropertyValue('transform') ||
		'FAIL';

	// With rotate(30deg)...
	// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
	console.log('Matrix: ' + tr);

	// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

	let values = tr.split('(')[1].split(')')[0].split(',');
	let a = values[0];
	let b = values[1];
	let c = values[2];
	let d = values[3];

	let scale = Math.sqrt(a * a + b * b);
	scales.value = scale;
	console.log('Scale: ' + scale);
}
</script>

<style lang="scss" scoped>
.home {
	position: relative;
	width: 100%;
	height: 100%;
	background: url('@/assets/images/index-bg.png') no-repeat;
	background-size: 100% 100%;

	.chart-list {
		height: 100%;
		overflow: hidden;

		.chart-content {
			height: calc(100% - 100px);

			.chart-content-row,
			.chart-content-col {
				height: 100%;
			}

			.chart-container {
				width: 100%;
				height: 100%;
			}

			.virtual-list-content {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				height: 98%;
				padding: 0 8px;

				.virtual-list-item {
					display: flex;
					gap: 8px;
					align-items: center;
					padding: 4px;
					color: rgb(255 255 255);
					cursor: pointer;

					&:hover {
						color: #68d8ff;
						background: rgb(255 255 255 / 10%);
					}

					&-col {
						width: 33%;
						overflow: hidden;
						text-align: center;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			&-left {
				flex-direction: column;
				row-gap: 8px !important;
				height: 100%;

				&-item:first-of-type {
					flex: none;
					width: 100%;
					height: 250px;
				}

				&-item:not(:first-of-type) {
					flex: 1;
					width: 100%;
				}

				&-item:nth-child(2) {
					margin: 20px 0;
				}

				.liu-dong {
					flex: 1;
					width: 100%;
				}
			}

			&-center {
				display: flex;
				flex-direction: column;
				height: 100%;

				&-top {
					flex: 1;
					width: 100%;
				}

				&-bottom {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: 123px;

					&-menu {
						display: flex;
						flex: 1;
						align-items: center;
						justify-content: center;
						width: 100%;

						div {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 130px;
							height: 50px;
							color: #fff6d1;
							background: linear-gradient(180deg, #87161a 0%, #a2262b 98%);
							border: 1px dashed #666666;
						}

						div:nth-of-type(2) {
							margin: 0 60px;
						}
					}

					&-img {
						width: 100%;
						height: 50px;
						background-image: url('../../assets/images/foot.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			&-right {
				flex-direction: column;
				row-gap: 8px !important;
				height: 100%;

				&-item:first-of-type {
					flex: none;
					width: 100%;
					height: 250px;
				}

				&-item:not(:first-of-type) {
					flex: 1;
					width: 100%;
				}

				&-item {
					margin-bottom: 20px;
				}

				.liu-dong {
					flex: 1;
					width: 100%;
				}
			}
		}
	}
}

.left-progress {
	width: 365px;
	width: 100%;

	.progress-tool {
		& > span:nth-child(1) {
			margin-right: 5px;
			color: #fff6d1;
		}

		& > span:nth-child(2) {
			color: #ff903e;
		}
	}
}

::v-deep .ant-progress-success-bg {
	background-color: #ff5f23;
}

::v-deep .ant-rate-star-zero {
	display: none;
}

// 小屏幕下的样式
@media (max-width: 576px) {
	.home {
		height: unset;
		background: #060c20;

		.chart-content {
			.chart-content-col:first-child {
				height: 1000px !important;
			}

			&-left,
			&-center {
				&-item {
					flex: 1 !important;
				}
			}

			.chart-content-col:nth-child(2) {
				height: 1500px !important;
			}

			.chart-content-col:nth-child(3) {
				height: 1500px !important;
			}
		}
	}
}
</style>

<style lang="scss">
.ant-tooltip-inner {
	min-height: unset;
}

.tooltip-review {
	// width: 80%;
	overflow: hidden;

	.tooltip-title {
		width: 180px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tooltip-btn {
		width: max-content;
		padding: 2px 5px;
		margin: 5px 5px 0 0;
		color: #ffffff;
		cursor: pointer;
		background-color: #ff6e76;
		border-radius: 4px;
	}

	.tooltip-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.tooltip-label-icon {
		display: flex;
		align-items: center;
		margin-right: 5px;
		overflow: hidden;

		.tooltip-label {
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.tooltip-icon {
			width: 6px;
			height: 6px;
			margin-right: 5px;
			border-radius: 50%;
		}
	}

	.tooltip-value {
		flex: 1;
		flex-shrink: 0;
		font-size: 15px;
		font-weight: bold;
		color: #666666;
	}
}
</style>
